//首页
import React,{Component} from 'react'
import { Layout ,Avatar,Icon ,Tabs,Menu,message} from 'antd';
import {BrowserRouter as Router,  Route,Link } from 'react-router-dom';
import * as tools from '../../tools/tools'
import $ from 'jquery'
import './HomePage.css'
import Button from '../../components/button/button'    //封装的点击水波纹按钮组件
import Agent from '../Agent/Agent'    //城市服务商页面
import Examine from '../Examine/Examine'   //审核
import Manage from '../Manage/Manage'       //管理
import MarketingActivities from '../OperationManagement/MarketingActivities/MarketingActivities'  //运营
import AuthorityManagementAcount from '../AuthorityManagement/AuthorityManagementAcount/AuthorityManagementAcount'  //账号管理主页
import RoleManagementIndex from '../AuthorityManagement/RoleManagementIndex/RoleManagementIndex'        //角色
import NodeManagementIndex from '../AuthorityManagement/NodeManagementIndex/NodeManagementIndex'        //节点
import PaymentManagement from '../PaymentManagement/PaymentManagement/PaymentManagement'

const { Header, Content, Sider } = Layout;
const TabPane = Tabs.TabPane;
const SubMenu = Menu.SubMenu;
const Item = Menu.Item;


export default class HomePage extends Component{
    constructor(props){
        super(props);
        this.newTabIndex = 0;
        this.Subindex= [];
        const panes = [
            // { title: '总收益', content: <Agent></Agent>, key: '0', closable: false }
        ];
        this.state={
            menulist:JSON.parse(localStorage.menu),
            fristflag:{},
            fristid:0,
            activeKey:0,
            panes,
            fristdata:[
                {
                    id:1,
                    name:"首页"
                },
                {
                    id:2,
                    name:"代理管理"
                },
                {
                    id:3,
                    name:"店铺管理"
                },
                {
                    id:4,
                    name:"订单管理"
                },
                {
                    id:5,
                    name:"用户管理"
                },
                {
                    id:6,
                    name:"财务管理"
                }
            ],
        }
    }

    
    fristclick=(index,id)=>{       //一级导航点击样式的改变
        this.setState({
            fristid:index,
        })
    }
   
   //一级导航js生成，由json文件直接生成，，下面二级、三级导航一样
    getfristchild=(data)=>{                    
        const myfriststyle = {
            backgroundImage: 'linear-gradient(-135deg, #86D0FF 0%, #5298FF 100%)',
            boxShadow: '0 4px 8px 0 rgba(76,142,219,0.30)',
            borderRadius: '100px',
            width:'1.75rem',
            height:'100%',           
            color:'#fff'
        }
        const myfiststyle_unclick={
            width:'1.75rem',
            height:'100%'
        }
        this.Subindex = [];
        let child = data.map((item,index)=>{
            return(
                 <li key={index}>
                    <Button key={item.id} datastyle={this.state.fristid == index?myfriststyle:myfiststyle_unclick} onClick={()=>this.fristclick(index,item.id)}>
                        {item.name}
                    </Button>
                 </li>
            )
        })
        return child
    }

    onEdit = (targetKey, action) => {      //删除标签页产生的回调，同时下面remove函数是删除标签页的函数
        this[action](targetKey);
      }
    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
            lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    }

    onChange = (activeKey) => {     // tabs标签页改变时产生的回调
        this.setState({ activeKey });
      }

    thirdclick=(obj)=>{    //三级导航点击样式的改变，及点击打开tabs压面的js
        // console.log(obj)
        // let path = obj.key.substr(0,obj.key.indexOf('/'))
        const panes = this.state.panes;                         
        const activeKey = `Tab${this.newTabIndex++}`; //id
        var flag=0;
        for(let i =0; i<panes.length;i++){
            if(panes[i].key === activeKey){
                flag=1;
                break;
            }
        }
        if(!flag){
            // console.log(obj.item.props.children.props.to.pathname)
            panes.push({ title: obj.item.props.children, content: <Route path={obj.item.props.children.props.to.pathname}  component={obj.item.props.children.props.to.name} key={obj.key}></Route>  , key: activeKey });  
            //点击四级导航打开tabs，panes是页面内容
        }
        this.setState({ 
            panes,
            activeKey
        })
    }

    menuList=(data)=>{        //菜单二级导航
        // console.log(data)
        let child =data.child.map((item,index)=>{
            this.Subindex.push(`${item.id}`);
            
            // console.log(this.Subindex)
            // console.log(item)
            return(
                <SubMenu key={item.id} title={<span>{item.name}</span>} >
                    {item.child.map((com,index)=>{
                        {/* console.log(com) */}
                        if(com.pid == 2){
                            if(com.id ==4){     //账号
                                return(
                                    <Item key={`AuthorityManagementAcount/${com.id}`}>
                                        <Link to={{pathname : '/HomePage/AuthorityManagementAcount' ,name:AuthorityManagementAcount ,   state: { id: com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                    </Item>
                                )
                            }else if(com.id ==3){       //角色
                                return(
                                    <Item key={`RoleManagementIndex/${com.id}`}>
                                        <Link to={{pathname : '/HomePage/RoleManagementIndex' ,name:RoleManagementIndex ,   state: { id: com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                    </Item>
                                )
                            }else if(com.id ==5){       //节点
                                return(
                                    <Item key={`NodeManagementIndex/${com.id}`}>
                                        <Link to={{pathname : '/HomePage/NodeManagementIndex' ,name:NodeManagementIndex ,   state: { id: com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                    </Item>
                                )
                            }
                        }
                        if(com.pid == 15){
                            return(
                                <Item key={`Agent/${com.id}`}>
                                    <Link to={{pathname : '/HomePage/Agent' ,name:Agent ,   state: { id: com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                </Item>
                            )
                        }
                        if(com.pid == 16){
                            return(
                                
                                <Item key={`Examine/${com.id}`}>
                                    <Link to={{pathname : '/HomePage/Examine' ,name:Examine ,   state: { id:  com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                </Item>
                            )
                        }
                        if(com.pid == 17){
                            return(
                                
                                <Item key={`Manage/${com.id}`}>
                                    <Link to={{pathname : '/HomePage/Manage' ,name:Manage ,   state: { id:  com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                </Item>
                            )
                        }  
                        {/* if(com.pid == 26){
                            //广告
                            return(
                                <Item key={`Manage/${com.id}`}>
                                    <Link to={{pathname : '/HomePage/Manage' ,name:Manage ,   state: { id:  com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                </Item>
                            )
                        }     */}
                        if(com.pid ==27){
                            //营销活动
                            if(com.id ==30){
                                     //这里return是红包内容
                            }else{
                                return(
                                
                                    <Item key={`MarketingActivities/${com.id}`}>
                                        <Link to={{pathname : '/HomePage/MarketingActivities' ,name:MarketingActivities ,   state: { id:  com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                    </Item>
                                )
                            }
                        }
                        if(com.pid ==33){           //支付管理
                            return(
                                <Item key={`PaymentManagement/${com.id}`}>
                                    <Link to={{pathname : '/HomePage/PaymentManagement' ,name:PaymentManagement ,   state: { id:  com.id,url:com.url }    }} extra="true">{com.name}</Link>
                                </Item>
                            )
                        }          
                    })}
                </SubMenu>
            )
        })
        return child
    }

    navEnd=()=>{
        tools.loginView(this).then(
        $.ajax({
            type:'post',
            url: tools.apiUrl+'loginout',
            data:{
                token:localStorage.token
            },
            success:(res)=>{
                if(res.status ==1){
                    localStorage.token='';
                    this.props.history.push("/")
                }else{
                    message.error(res.msg)
                }
            }
        })
    )
    }


    render(){
        let fristchildren = this.getfristchild(this.state.menulist.user_all_node)   //这里三个是循环li等
        let secondchildren = this.menuList(this.state.menulist.user_all_node[this.state.fristid])
        return( 
           //<Router >   
                <Layout style={{ minHeight: '100vh',backgroundColor:'#f8f8f8' }}>
                    <Header className="home_header">   
                                <div className="nav_logo">
                                    <div className="logo_image"></div>
                                </div>
                                <div style={{width:'100%',display:'flex'}}>
                                    <div className="nav_content">                         
                                        <div className="content_ul">
                                            <ul>
                                            {fristchildren}
                                            </ul>
                                        </div>
                                        <div className="content_user">
                                            <div className="user_avatar">
                                            <Link to={{pathname : '/HomePage/Manage'  ,   state: { id:  18,url:'' }    }} extra="true"><Avatar size="large" style={{display:'flex'}}>彦祖</Avatar></Link>
                                                <Icon type="caret-down" style={{color:'#999',marginLeft:'10px',fontSize:'13px'}}/>
                                            </div>
                                            <div className="user_email">
                                            </div>
                                            <div className="user_search">

                                            </div>
                                        </div>
                                    </div>
                                    <div className="nav_end" onClick={this.navEnd}>
                                    </div>
                                </div>
               
                    </Header>                                                    {/*    这里之上是head，一级导航及logo */}
                    <Layout style={{backgroundColor:'#fff'}}>
                        <Sider collapsible collapsedWidth={0} className="sider_third" width="160" trigger={null}>
                            {/* <Menu mode="inline" defaultOpenKeys={`${this.Subindex}`}  onSelect={this.thirdclick} className="homemenu"> */}
                            <Menu mode="inline"  onSelect={this.thirdclick} className="homemenu"> 
                               {secondchildren}
                            </Menu>
                        </Sider>
                        <Content style={{background:'#f8f8f8'}}>          {/*    content标签是右边内容主体 */}
                            <Tabs hideAdd type="editable-card"  onEdit={this.onEdit}
                            activeKey={this.state.activeKey} onChange={this.onChange}>
                                {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key}>
                                    {pane.content}
                                </TabPane>)}
                            </Tabs>
                            {/* <Route  path='/HomePage/Manage' component={Manage} /> */}
                        </Content>
                    </Layout>                                   {/*    这里之上是二级、三级、四级导航*/}
                </Layout>
        //   </Router>
        )
    }
}